import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import { HelmetProvider } from 'react-helmet-async';
import { worker } from './_mock';
// eslint-disable-next-line import/no-unresolved
import 'virtual:svg-icons-register';

import App from '@/App';

import './locales/i18n';
import './theme/index.css';

const charAt = `
__________________ _______  _            _______  _______  _        _______      _______ _________
\__   __/\__   __/(  ___  )( (    /|    (  ____ \(  ___  )( (    /|(  ____ \    (  ___  )\__   __/
   ) (      ) (   | (   ) ||  \  ( |    | (    \/| (   ) ||  \  ( || (    \/    | (   ) |   ) (   
   | |      | |   | (___) ||   \ | |    | |      | (___) ||   \ | || |          | (___) |   | |   
   | |      | |   |  ___  || (\ \) |    | | ____ |  ___  || (\ \) || | ____     |  ___  |   | |   
   | |      | |   | (   ) || | \   |    | | \_  )| (   ) || | \   || | \_  )    | (   ) |   | |   
   | |   ___) (___| )   ( || )  \  |    | (___) || )   ( || )  \  || (___) |    | )   ( |___) (___
   )_(   \_______/|/     \||/    )_)    (_______)|/     \||/    )_)(_______)    |/     \|\_______/
                                                                                                  
                                                                                              
  `;
console.info(`%c${charAt}`, 'color: #5BE49B');

// 创建一个 client
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 3, // 失败重试次数
      cacheTime: 300_000, // 缓存有效期 5m
      staleTime: 10_1000, // 数据变得 "陈旧"（stale）的时间 10s
      refetchOnWindowFocus: false, // 禁止窗口聚焦时重新获取数据
      refetchOnReconnect: false, // 禁止重新连接时重新获取数据
      refetchOnMount: false, // 禁止组件挂载时重新获取数据
    },
  },
});

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <React.StrictMode>
    <HelmetProvider>
      <QueryClientProvider client={queryClient}>
        <ReactQueryDevtools initialIsOpen={false} />
        <Suspense>
          <App />
        </Suspense>
      </QueryClientProvider>
    </HelmetProvider>
  </React.StrictMode>,
);

worker.start({ onUnhandledRequest: 'bypass' });
